<template>
  <div class="home">
    <div class="top">
      <img src="/src/assets/images/icon.png" alt="" />
      <span>深度摄像头编程</span>
    </div>
    <div class="main">
      <div class="main-content">
        <div class="mc-t">
          <div
            class="mct-left"
            :style="
              stepList.length === answerList.length ? { width: '100%' } : ''
            "
          >
            <div class="mctl-top">
              <SvgIcon name="point" size="32" />
              <SvgIcon name="close" />
            </div>
            <pre class="mctl-content">
"""
获取彩色图片
"""
import cv2
import yaml

from pyorbbecsdk import Config
from pyorbbecsdk import OBError
from pyorbbecsdk import OBSensorType, OBFormat
from pyorbbecsdk import Pipeline, FrameSet
from pyorbbecsdk import VideoStreamProfile
from util import frame_to_bgr_image

# 获取彩色图片
def capture_image(config_path):
    with open(config_path, 'r') as file:
        data = yaml.safe_load(file)
    path_RGBImg = data['acq_RGBImg']
    print(path_RGBImg)
    config = Config()
    pipeline = Pipeline()
    try:
        profile_list = pipeline.get_stream_profile_list(OBSensorType.COLOR_SENSOR)
        try:
            color_profile: VideoStreamProfile = <pre :class="['hole', isEnd && answers[0].index !== 0 ? 'error' : '', isEnd && preview === 0 ? 'border-err': '']" @drop="handleDrop(1)" @dragover.prevent>{{ answers[0].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[0].index)?.content : '' }}</pre>
        except OBError as e:
            print(e)
            color_profile = profile_list.get_default_video_stream_profile()
            print("Default color profile used: ", color_profile)
            <pre :class="['hole', isEnd && answers[1].index !== 1 ? 'error' : '', isEnd && preview === 1 ? 'border-err': '']" @drop="handleDrop(2)" @dragover.prevent>{{ answers[1].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[1].index)?.content : '' }}</pre>
    except Exception as e:
        print(e)
        return
<pre :class="['hole', isEnd && answers[2].index !== 2 ? 'error' : '', isEnd && preview === 2 ? 'border-err': '']" @drop="handleDrop(3)" @dragover.prevent>{{ answers[2].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[2].index)?.content : '' }}</pre>

    while True:
        try:
            frames: FrameSet = <pre :class="['hole', isEnd && answers[3].index !== 3 ? 'error' : '', isEnd && preview === 3 ? 'border-err': '']" @drop="handleDrop(4)" @dragover.prevent>{{ answers[3].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[3].index)?.content : '' }}</pre>
            if frames is None:
                continue
            color_frame = frames.get_color_frame()
            if color_frame is None:
                continue
            color_image = <pre :class="['hole', isEnd && answers[4].index !== 4 ? 'error' : '', isEnd && preview === 4 ? 'border-err': '']" @drop="handleDrop(5)" @dragover.prevent>{{ answers[4].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[4].index)?.content : '' }}</pre>
            if color_image is None:
                print("Failed to convert frame to image")
                continue
            # Save the image and exit
            <pre :class="['hole', isEnd && answers[5].index !== 5 ? 'error' : '', isEnd && preview === 5 ? 'border-err': '']" @drop="handleDrop(6)" @dragover.prevent>{{ answers[5].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[5].index)?.content : '' }}</pre>
            print("Image saved")
            break  # Exit after saving the image

        except KeyboardInterrupt:
            break
<pre :class="['hole', isEnd && answers[6].index !== 6 ? 'error' : '', isEnd && preview === 6 ? 'border-err': '']" @drop="handleDrop(7)" @dragover.prevent>{{ answers[6].index !== -1 ? answerList.find((item:any) => item.id - 1 === answers[6].index)?.content : '' }}</pre></pre>
          </div>
          <div class="mct-right" v-show="stepList.length !== answerList.length">
            <div class="mctr-top">
              <div class="mctrt-circle">&lt;/&gt;</div>
            </div>
            <div class="mctr-content">
              <template v-for="item in answerList" :key="item.id">
                <div
                  class="mctrc-item"
                  draggable="true"
                  :style="
                    !stepList.includes(item.id - 1)
                      ? { opacity: '1' }
                      : { opacity: '0' }
                  "
                  @dragstart="handleDragStart(item.id)"
                >
                  {{ item.content }}
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="mc-b">
          <div class="mcb-1"></div>
          <div class="mcb-2"></div>
          <div class="mcb-3"></div>
          <div class="mcb-4"></div>
          <div class="analyze">
            <p class="analyze-title">解析：</p>
            <p class="analyze-content">
              {{
                isEnd
                  ? answerList.find((item: any) => item.id - 1 === preview)
                      ?.analyze
                  : ''
              }}
            </p>
          </div>
        </div>
      </div>
      <div class="main-btn">
        <!-- <div class="btn b1" v-if="!isEnd" @click="handleCancel">
          <SvgIcon name="back" size="18" style="margin-right: 4px" />
          撤销
        </div> -->
        <div class="btn b2" v-if="!isEnd" @click="handleSubmit">
          <SvgIcon name="finish" size="18" style="margin-right: 4px" />
          提交
        </div>
        <div class="btn b3" v-if="isEnd" @click="handleNext">
          <SvgIcon name="next" size="18" style="margin-right: 4px" />
          下一处
        </div>
        <div class="btn b4" v-if="isEnd" @click="handleAgain">
          <SvgIcon name="again" size="18" style="margin-right: 4px" />
          重新作答
        </div>
      </div>
    </div>
    <Dialog ref="dialogRef" />
  </div>
</template>

<script setup lang="ts">
import Dialog from './components/dialog.vue'

const dialogRef = ref()

// 右侧的答案列表
const answerList = ref<any>([
  { id: 7, content: 'pipeline.stop()', analyze: '停止数据获取管线' },
  {
    id: 6,
    content: 'cv2.imwrite(path_RGBImg, color_image)',
    analyze: '将彩色数据写入到文件内',
  },
  {
    id: 3,
    content: 'pipeline.start(config)',
    analyze: '根据配置项启动数据获取管线',
  },
  {
    id: 1,
    content: 'profile_list.get_video_stream_profile(640, 0, OBFormat.RGB, 30)',
    analyze: '设置彩色图像的分辨率并获取图像描述对象',
  },
  {
    id: 5,
    content: 'frame_to_bgr_image(color_frame)',
    analyze: '将彩色数据转换为BGR格式',
  },
  {
    id: 2,
    content: ' config.enable_stream(color_profile)',
    analyze: '使能color_profile表征的彩色图配置',
  },
  {
    id: 4,
    content: 'pipeline.wait_for_frames(100)',
    analyze: '通过数据获取管线得到数据帧，超时等待时间为100毫秒',
  },
])

// 左侧答案列表
const answers = ref<any>([
  { index: -1 },
  { index: -1 },
  { index: -1 },
  { index: -1 },
  { index: -1 },
  { index: -1 },
  { index: -1 },
])

// 步骤
const stepList = ref<any>([])

// 记录位置
const position = ref<any>([])

// 当前拖拽
const dragNum = ref<any>(null)

// 是否结束
const isEnd = ref<boolean>(false)

// 结束后的预览位置定位
const preview = ref<number>(0)

// 拖拽开始
const handleDragStart = (index: number) => {
  dragNum.value = index - 1
}

// 拖拽结束
const handleDrop = (index: number) => {
  // 记录步骤
  stepList.value.push(dragNum.value)
  // 记录位置，并且不重复
  if (!position.value.includes(index - 1)) {
    position.value.push(index - 1)
  }

  // 如果当前移入的位置有数据
  if (answers.value[index - 1].index !== -1) {
    // 删除之前记录的步骤
    stepList.value.splice(
      stepList.value.indexOf(answers.value[index - 1].index),
      1,
    )
  }

  answers.value[index - 1].index = dragNum.value
}

// 撤销
// const handleCancel = () => {
//   if (stepList.value.length > 0) {
//     // 根据步骤列表最后一个来删除记录
//     answers.value[position.value[position.value.length - 1]].index = -1
//     // 步骤列表最后一个删除
//     stepList.value.splice(stepList.value.length - 1, 1)
//     // 位置列表最后一个删除
//     position.value.splice(position.value.length - 1, 1)
//   }
// }

// 提交
const handleSubmit = () => {
  // 是否全部填写
  if (stepList.value.length === answerList.value.length) {
    isEnd.value = true
    let count = 0
    answers.value.forEach((item: any, index: number) => {
      if (item.index !== index) {
        count++
      }
    })
    dialogRef.value.showFn(count)
  } else {
    ElMessage.error('请填写全部题目！')
  }
}

// 下一步
const handleNext = () => {
  // 不超出范围内+1，否则回到0
  if (preview.value < answerList.value.length - 1) {
    preview.value++
  } else {
    preview.value = 0
  }
}

// 重新作答
const handleAgain = () => {
  isEnd.value = false
  for (let i = 0; i < answers.value.length; i++) {
    answers.value[i].index = -1
  }
  preview.value = 0
  stepList.value = []
  position.value = []
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  min-height: 500px;
  user-select: none;

  .top {
    position: relative;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    background: url(/src/assets/images/top-bg.png) no-repeat center;
    background-size: cover;
    padding-left: 3vw;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
    z-index: 1;

    span {
      font-size: 24px;
      color: #3880e4;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-left: 8px;
    }

    img {
      width: auto;
      height: 80%;
    }
  }

  .main {
    height: 90%;
    background: url(/src/assets/images/main-bg.png) no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    padding-bottom: 8px;

    .main-content {
      height: 90%;
      width: 100%;

      .mc-t {
        height: 80%;
        width: 100%;
        border: 6px solid #ceeaff;
        border-radius: 4px;
        box-shadow: 0 0 0 12px #5b69a6;
        display: flex;
        overflow: hidden;
        background-color: #ceeaff;

        .mct-left {
          width: 65%;
          background-color: #fff;

          .mctl-top {
            height: 20px;
            display: flex;
            padding: 0 8px;
            justify-content: space-between;
            align-items: center;
            background-color: #819ce1;
          }

          .mctl-content {
            height: calc(100% - 16px);
            background-color: #fff;
            padding: 12px 8px;
            overflow: auto;
            font-size: 14px;
            white-space: pre-wrap;
            word-wrap: break-word;

            .hole {
              background-color: #cde7fe;
              padding: 6px 12px;
              margin: 0 60px;
              border-radius: 4px;
              min-height: 33px;
              min-width: 100px;
              max-width: calc(100% - 120px);
              width: fit-content;
              white-space: pre-wrap;
            }

            .error {
              color: #ff0000;
            }

            .border-err {
              border: 5px ridge #ff0000;
            }
          }
        }

        .mct-right {
          width: calc(35% - 8px);
          margin-left: 8px;
          background-color: green;

          .mctr-top {
            padding-left: 8px;
            height: 20px;
            background-color: #819ce1;
            overflow: hidden;

            .mctrt-circle {
              height: 100%;
              width: 20px;
              border-radius: 50%;
              font-size: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #6488d4;
              font-weight: 600;
              background-color: #dfe6fc;
            }
          }

          .mctr-content {
            height: calc(100% - 16px);
            background-color: #6488d4;
            padding: 12px;
            overflow: auto;
            display: flex;
            flex-direction: column;

            .mctrc-item {
              width: 100%;
              cursor: pointer;
              word-wrap: break-word;
              padding: 4px 8px;
              font-size: 13px;
              background-color: #fff;
              margin-bottom: 12px;
              color: #2563eb;
              border-radius: 4px;
            }

            :last-child {
              margin-bottom: 0;
            }

            &::-webkit-scrollbar-track {
              background-color: #fff;
            }

            &::-webkit-scrollbar-thumb {
              border-radius: 0;
              background-color: #ccc;
            }

            &::-webkit-scrollbar-thumb:hover {
              background-color: #aaa;
            }
          }
        }
      }

      .mc-b {
        position: relative;
        height: calc(20% - 12px);
        width: 100%;
        display: flex;
        margin-top: 12px;
        flex-direction: column;
        align-items: center;

        .mcb-1 {
          height: 20%;
          width: 20%;
          background-color: #7088d0;
        }

        .mcb-2 {
          height: 30%;
          width: 25%;
          background-color: #91a7df;
          clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
        }

        .mcb-3 {
          height: 40%;
          width: 50%;
          background-color: #a7caec;
          clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
        }

        .mcb-4 {
          height: 10%;
          width: 50%;
          background-color: #c7e9fd;
        }

        .analyze {
          top: 20%;
          width: 100%;
          height: 80%;
          background-color: rgba(255, 255, 255, 0.6);
          position: absolute;
          border-radius: 12px;
          border: 2px solid #7db0fd;
          padding: 6px 12px;
          font-size: 18px;
          display: flex;

          .analyze-title {
            color: #0b6bf2;
            font-weight: 600;
          }

          .analyze-content {
            display: inline-block;
            margin-top: 8px;
            margin-left: 8px;
          }
        }
      }
    }

    .main-btn {
      height: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;

      .btn {
        cursor: pointer;
        height: 38px;
        width: 120px;
        border-radius: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        fill: #fff;
        background-color: #fff;
      }

      .b1 {
        background-color: #409eff;
      }

      .b2 {
        background-color: #27ce9b;
      }

      .b3 {
        background-color: #fab344;
      }

      .b4 {
        background-color: #f2642c;
      }
    }
  }
}
</style>
